<template>
  <div class="problemDetail pa-flex">
    <div class="proIntro">
      <div class="title">项目名称</div>
      <div class="content">{{ proDetail.projectName }}</div>
      <div class="title">咨询类型</div>
      <div class="content">{{ gtype }}</div>
      <div class="title">咨询标题</div>
      <div class="content">{{ proDetail.guaranty }}</div>
      <div class="title">附件材料</div>
      <div class="content">
        <template v-if="proDetail.file.length > 0">
          <span
            class="blue"
            @click="
              downFile(proDetail.file[0].fileUrl, proDetail.file[0].fileName)
            "
            >{{ proDetail.file[0].fileName }}.{{
              proDetail.file[0].fileType
            }}</span
          >
        </template>
      </div>
      <div class="title">联系人</div>
      <div class="content">{{ proDetail.projectLeader }}</div>
      <div class="title">联系方式</div>
      <div class="content">{{ proDetail.projectPhone }}</div>
      <div class="title">问题描述</div>
      <div class="content">{{ proDetail.content }}</div>
      <div
        v-if="flag === '1'"
        class="moreContent"
        @click="dialogVisible = true"
      >
        <span class="text">无法解答请求协助</span>
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>
    <div class="right">
      <div class="headTitle">服务过程</div>
      <div class="line"></div>
      <div class="c2">
        <div class="t pa-mb-2">问题详情</div>
        <div class="shadow">
          <div class="pa-flex">
            <div class="pa-mr-2">{{ proDetail.projectName }}</div>
            <div>
              客户：{{ proDetail.projectLeader }} {{ proDetail.projectPhone }}
            </div>
          </div>
          <div class="pa-flex pa-mt-2">
            <div class="pItem">
              <div class="label">联报类型</div>
              <div class="val">{{ gtype }}</div>
            </div>
            <div class="pItem">
              <div class="label">联报内容</div>
              <div class="val">{{ proDetail.guaranty }}</div>
            </div>
            <div class="pItem">
              <div class="label">提交时间</div>
              <div class="val">
                {{ proDetail.createTime && proDetail.createTime.split(" ")[0] }}
              </div>
            </div>
          </div>
        </div>
        <div class="shadow pa-mt-2">
          <div>需求描述</div>
          <div class="pa-mt-2">{{ proDetail.content }}</div>
        </div>
        <div class="t pa-mt-3" v-if="flag == 1">协助解答</div>
        <div class="t pa-mt-3" v-if="flag == 2">回复详情</div>
        <div v-if="flag == 1">
          <div class="shadow pa-mt-2">
            <el-input
              type="textarea"
              v-model="content"
              placeholder="请输入内容..."
            ></el-input>
            <div class="pa-mt-2 pa-flex pa-jc-between pa-ai-end">
              <div class="uploadBox">
                <el-upload
                  class="upload-demo"
                  action="http://zhmsbgapi.wenkangkeji.com/common/interface/upload_img"
                  multiple
                  :limit="1"
                  :file-list="fileList"
                  :http-request="handleRequest"
                >
                  <div class="upload pa-flex">
                    <div class="icon">
                      <i class="el-icon-upload"></i>
                    </div>
                    <div>
                      <div class="desc1">上传附件</div>
                      <div class="desc2">点击上传附件</div>
                    </div>
                  </div>
                </el-upload>
              </div>
              <el-button type="primary" @click="submit">提交</el-button>
            </div>
          </div>
          <div class="endService">
            <el-button class="end" @click="helpEndService">结束服务</el-button>
          </div>
        </div>
        <div v-if="flag == 2">
          <div class="shadow pa-mt-2">
            <div class="detail">{{ answerDetail.answer }}</div>
            <!-- <div class="file pa-ai-center" @click="loadFile">
              <div class="icon pa-ml-1 pa-mr-1">
                <i class="el-icon-upload"></i>
              </div>
              <div>{{ answerDetail.fileName }}</div>
            </div>-->
          </div>
        </div>
      </div>
    </div>
    <Window-staff :dialogVisible.sync="dialogVisible" @makeSure="makeSure" />
  </div>
</template>
<script>
import {
  getHelpDetailApi,
  getHelpByIdApi,
  acceptProblemsApi,
  giveAssistantGuarantyApi,
  helpAssistantGuarantyApi,
  helpEndServiceApi
} from "@/api/manageApi.js";
import { uploadImage } from "@/api/commonApi";
import WindowStaff from "@/components/WindowStaff/index.vue";
import axios from 'axios'

export default {
  components: {
    WindowStaff
  },
  data() {
    return {
      content: "",
      problemId: "",
      probType: "",
      fileList: [],
      proDetail: {},
      imgUrl: "",
      windowId: "",
      dialogVisible: false,
      flag: "",
      fileName: "",
      fileType: "",
      suffix: "",
      answerDetail: {}
    };
  },
  mounted() {
    if (this.$route.query) {
      this.problemId = this.$route.query.id;
      this.probType = this.$route.query.type;
      this.flag = this.$route.query.flag;
    }
    this.getHelpDetail();
    if (this.flag == 2) {
      this.getHelpById();
    }
  },
  computed: {
    gtype() {
      if (this.proDetail.gtype == 1) {
        return "通水";
      } else if (this.proDetail.gtype == 2) {
        return "通电";
      } else if (this.proDetail.gtype == 3) {
        return "通气";
      } else if (this.proDetail.gtype == 4) {
        return "通网络";
      }
    }
  },
  methods: {
    makeSure(id) {
      this.windowId = id;
      this.giveAssistantGuaranty();
    },
    loadFile() {
      window.open(this.answerDetail.file, "_blank");
    },
    // 问题给窗口人员
    giveAssistantGuaranty() {
      giveAssistantGuarantyApi({
        problemId: this.problemId,
        problemType: this.probType,
        windowId: this.windowId,
        userId: JSON.parse(localStorage.getItem("P-User-Info")).id
      }).then(res => {
        if (res.code == 0) {
          this.dialogVisible = false;
          this.$message.success(res.msg);
        }
      });
    },
    // 结束服务
    helpEndService() {
      helpEndServiceApi({
        id: this.problemId,
        solution: "1",
        problemType: this.probType
      }).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg);
          this.$router.go(-1);
        }
      });
    },
    // 获取问题详情
    getHelpDetail() {
      getHelpDetailApi({
        types: this.probType,
        id: this.problemId
      }).then(res => {
        if (res.code == 0) {
          this.proDetail = res.data;
          this.proDetail.file = JSON.parse(this.proDetail.file);
        }
      });
    },
    // 获取帮扶详情
    getHelpById() {
      getHelpByIdApi({
        types: this.probType,
        id: this.problemId
      }).then(res => {
        if (res.code == 0) {
          this.answerDetail =
            res.data.answers && res.data.answers.length
              ? res.data.answers[0]
              : {};
        }
      });
    },
    // 上传文件
    handleRequest(file) {
      const formData = new FormData();
      formData.append("file", file.file);
      uploadImage(formData).then(res => {
        if (res.code == 0) {
          this.imgUrl = res.imgUrl;
          this.fileName = res.fileName;
          this.suffix = res.suffix;
          if (["jpg", "png", "gif", "jpeg"].includes(res.suffix)) {
            this.fileType = "1";
          } else if (res.suffix == "doc" || res.suffix == "docx") {
            this.fileType = "2";
          } else if (res.suffix == "xls" || res.suffix == "xlsx") {
            this.fileType = "3";
          }
          this.$message.success("上传成功");
        } else {
          this.$message.error("上传失败");
        }
      });
    },
    downFile(url, name) {
      // 个人赋值
      if (url == null) {
        return;
      }
      //  params = { taskCommonId: this.commonId };
      const fileName = url;
      let fileTypeMime = ""; // 文件mime类型
      // url = `${window._CONFIG['domianURL']}trial/task/plan/common/getFileByTaskCommonId`;
      let suffix = fileName.split("."); // split后获得文件后缀
      suffix = suffix[suffix.length - 1];
      switch (
        suffix // switch获取后缀对应的mime 可参考上文链接
      ) {
        case "png":
          fileTypeMime = "image/png";
          break;
        case "doc":
          fileTypeMime = "application/msword";
          break;
        case "docx":
          fileTypeMime =
            "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
          break;
        case "jpg":
        case "jpeg":
          fileTypeMime = "image/jpeg";
          break;
        case "gif":
          fileTypeMime = "image/gif";
          break;
        case "svg":
          fileTypeMime = "image/svg+xml";
          break;
        case "tif":
        case "tiff":
          fileTypeMime = "image/tiff";
          break;
        case "txt":
          fileTypeMime = "text/plain";
          break;
        case "ppt":
          fileTypeMime = "application/vnd.ms-powerpoint";
          break;
        case "pptx":
          fileTypeMime =
            "application/vnd.openxmlformats-officedocument.presentationml.presentation";
          break;
        case "xls":
          fileTypeMime = "application/vnd.ms-excel";
          break;
        case "xlsx":
          fileTypeMime =
            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
          break;
        case "zip":
          fileTypeMime = "application/zip";
          break;
        case "7z":
          fileTypeMime = "application/x-7z-compressed";
          break;
      }
      axios
        .get(
          url,
          { params: {}, responseType: "blob" } // 一定要设置响应类型，否则文件会是空白
          // params: params,
        )
        .then(data => {
          const content = data; // arraybuffer类型数据
          const resBlob = new Blob([content.data]);
          const reader = new FileReader();
          reader.readAsText(resBlob, "utf-8");
          reader.onload = () => {
            try {
              // 判断是否可以转化为json格式，可以就说明不是文件流，错误返回值
              const res = JSON.parse(reader.result);
              this.$message.destroy();
              this.$message.error(res.message);
            } catch {
              // 报错说明不能转化为json，是文件流，下载文件
              // let blob = new Blob([data]); // 原 此种方式在pc端可以下载，但是手机端不行
              const blob = new Blob([data.data], {
                // eslint-disable-next-line no-undef
                type: fileTypeMime
              });
              const blobUrl = window.URL.createObjectURL(blob);
              const a = document.createElement("a");
              a.style.display = "none";
              a.download = name;
              a.href = blobUrl;
              a.click();
            }
          };
        });
    },
    getIconTitle(fileUrL) {
      if (!fileUrL) {
        return "";
      }
      const endIndex = fileUrL.lastIndexOf(".");
      const str = fileUrL.substr(endIndex);
      return str;
    },
    // 点击提交
    submit() {
      if (!this.content) {
        this.$message.warning("请输入解答内容");
        return;
      }
      acceptProblemsApi({
        types: this.probType,
        id: this.problemId,
        file: this.imgUrl,
        answer: this.content,
        fileType: this.fileType,
        fileName: this.fileName
      }).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg);
          this.content = "";
          this.imgUrl = "";
          this.fileList = [];
          this.$router.go(-1);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.blue{
  color: #408cff;
  cursor: pointer;
}
.problemDetail {
  .proIntro {
    width: 265px;
    height: 850px;
    background: #ffffff;
    box-shadow: 0px 6px 58px 0px rgba(196, 203, 214, 0.1);
    border-radius: 24px;
    padding: 28px 16px 0 16px;
    margin-right: 33px;
    .title {
      font-size: 14px;
      color: #999;
      margin: 20px 0 16px 0;
      &:first-child {
        margin-top: 0;
      }
    }
    .content {
      color: #0a1629;
    }
    .moreContent {
      width: 232px;
      height: 45px;
      line-height: 45px;
      text-align: center;
      background: #408cff;
      border-radius: 10px;
      margin-top: 60px;
      cursor: pointer;
      span {
        color: #ffffff;
        margin-right: 6px;
      }
      .el-icon-arrow-right {
        color: #ffffff;
      }
    }
  }
  .right {
    background-color: #fff;
    border-radius: 20px;
    flex: 2;
    .endService {
      display: flex;
      justify-content: flex-end;
      margin-top: 32px;
      .end {
        width: 99px;
        height: 44px;
        background: #ff3f3f;
        border-radius: 14px;
        color: #fff;
      }
    }
    .headTitle {
      font-size: 22px;
      color: #0a1629;
      margin-top: 21px;
      margin-left: 39px;
    }
    .line {
      height: 1px;
      background: #e6ebf5;
      margin-top: 23px;
    }

    .c2 {
      padding: 36px 25px 22px 47px;

      .t {
        font-size: 20px;
        color: #0a1629;
      }

      .shadow {
        border-radius: 10px;
        box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.14);
        padding: 21px 31px;
        .detail {
          // width: 679px;
          height: 111px;
          background: #ffffff;
          border: 1px solid #d8e0f0;
          box-shadow: 0px 1px 2px 0px rgba(184, 200, 224, 0.22);
          border-radius: 10px;
          padding: 14px 0 0 19px;
        }
        .file {
          width: 269px;
          height: 65px;
          background: #f3f6ff;
          border: 2px solid #c2c2c2;
          border-radius: 11px;
          margin-top: 18px;
          cursor: pointer;
          .icon {
            width: 43px;
            height: 43px;
            background: #2251f8;
            border-radius: 11px 11px 11px 11px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }

        .pItem {
          margin-right: 50px;

          .label {
            color: #91929e;
            font-size: 14px;
            margin-bottom: 10px;
          }
        }

        :deep(textarea) {
          height: 110px;
        }

        .el-button--primary {
          padding: 14px 12px;
          font-size: 16px;
          border-radius: 14px;
          height: 44px;
        }

        .uploadBox {
          .upload {
            width: 269px;
            height: 65px;
            background: #f3f6ff;
            border: 2px dashed #c2c2c2;
            border-radius: 11px;
            padding: 10px;

            .icon {
              width: 43px;
              height: 43px;
              background: #2251f8;
              border-radius: 11px 11px 11px 11px;
              color: #fff;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 20px;
            }

            .desc1 {
              font-size: 13px;
              color: #171b1e;
              margin-bottom: 10px;
            }

            .desc2 {
              font-size: 11px;
              color: #717579;
            }
          }
        }
      }
    }
  }
}
</style>
